<template>
	<view class="page">

		<view class="nav_bar" style="background-color: rgba(255, 255, 255, 1);">
			<uni-nav-bar color="#333" left-icon="left" title="绑定银行卡" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="back"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="content">
			<view class="title">身份信息</view>
			<view class="box flex_center">
				<view class="label">真实姓名</view>
				<view class="input flex_center">
					<input type="text" maxlength="20" v-model="info.card_name" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
			</view>

			<view class="box flex_center">
				<view class="label">身份证号</view>
				<view class="input flex_center">
					<input type="text" maxlength="18" v-model="info.cert_no" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
			</view>

			<view class="box flex_center">
				<view class="label">身份证有效期类型</view>
				<view class="input flex_center" @click="show_cert_validity_type = true">
					<view class="text">
						{{ info.cert_validity_type == 1 ? '长期有效' : '非长期有效' }}
					</view>

					<u-icon name="arrow-right" size="32rpx" color="#131313"></u-icon>
				</view>
			</view>

			<view class="box flex_center">
				<view class="label">身份证有效期开始日期</view>
				<view class="input flex_center" @click="show_cert_begin_date = true">
					<view class="text">
						{{ info.cert_begin_date || '' }}
					</view>
					<u-icon name="arrow-right" size="32rpx" color="#131313"></u-icon>
				</view>
			</view>

			<view class="box flex_center" v-if="info.cert_validity_type == 0">
				<view class="label">身份证有效期结束日期</view>
				<view class="input flex_center" @click="show_cert_end_date = true">
					<view class="text">
						{{ info.cert_end_date || '' }}
					</view>
					<u-icon name="arrow-right" size="32rpx" color="#131313"></u-icon>
				</view>
			</view>

		</view>

		<view class="content">
			<view class="title">银行卡信息</view>
			<view class="box flex_center">
				<view class="label">银行卡号</view>
				<view class="input flex_center">
					<input type="text" maxlength="32" v-model="info.card_no" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
			</view>


			<view class="box flex_center">
				<view class="label">银行</view>
				<view class="input flex_center" @click="show_bank_choose = true">
					<view class="text">
						{{ bank_name || '' }}
					</view>

					<u-icon name="arrow-right" size="32rpx" color="#131313"></u-icon>
				</view>
			</view>

			<view class="box flex_center">
				<view class="label">银行所在地区编码</view>
				<view class="input flex_center" @click="city_show = true">
					<view class="text">
						{{ info.area_id || '' }}
					</view>

					<u-icon name="arrow-right" size="32rpx" color="#131313"></u-icon>
				</view>
			</view>

			<view class="box flex_center">
				<view class="label">手机号码</view>
				<view class="input flex_center">
					<input type="number" maxlength="11" v-model="info.mobile" placeholder="请输入"
						placeholder-class="input-placeholder" />
				</view>
			</view>

			<view class="box flex_center">
				<view class="label">验证码</view>
				<view class="input flex_center">
					<input class="code_input" type="number" maxlength="11" v-model="info.code" placeholder="请输入"
						placeholder-class="input-placeholder" />
					<view class="code_btn flex_r_around" @click="getCode">
						<text>{{ tip || '' }}</text>
					</view>
				</view>
			</view>
			<u-code :seconds="60" ref="uCode" @change="codeChange" startText="获取验证码" changeText="xs"
				endText="重新发送"></u-code>
		</view>

		<view class="rich_agree flex_r_around">
			<view class="flex_center">
				<image :src="`/static/public/select${is_agree ? '_s' : ''}.png`" mode="aspectFill"
					@click="is_agree = !is_agree"></image>
				<text>
					我已认真阅读并同意<text
						@click="$util.toUrl('/pages/agreement/agreement?type=service&from_web=1')">《用户协议》</text>和<text
						@click="$util.toUrl('/pages/agreement/agreement?type=privacy&from_web=1')">《隐私政策》</text>
				</text>
			</view>
		</view>

		<view class="btn flex_r_around" @click="onSubmit">
			<text>确定绑卡</text>
		</view>


		<u-datetime-picker :show="show_cert_begin_date" mode="date" @confirm="onBeginDate"
			@close="show_cert_begin_date = false" @cancel="show_cert_begin_date = false" :minDate="0"
			:maxDate="Number(new Date())"></u-datetime-picker>

		<u-datetime-picker :maxDate="end_date_max" :minDate="end_date_min" :show="show_cert_end_date" mode="date"
			@confirm="onEndDate" @close="show_cert_end_date = false" @cancel="show_cert_end_date = false">
		</u-datetime-picker>

		<u-picker :show="show_bank_choose" ref="uPicker" :columns="list" @confirm="onChooseBank" keyName="name"
			@close="show_bank_choose = false" @cancel="show_bank_choose = false"></u-picker>

		<cityPicker :column="2" :mask-close-able="true" @confirm="onCity" @cancel="city_show = false"
			:visible="city_show" />

		<u-picker :show="show_cert_validity_type" :columns="type_list" @close="show_cert_validity_type = false"
			@cancel="show_cert_validity_type = false" @confirm="onCertValidityType">

		</u-picker>

	</view>
</template>

<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {

				from_web: 1,

				info: {
					// 持卡人姓名
					card_name: '',
					// 银行卡号
					card_no: '',
					// 省id
					prov_id: '',
					// 市id
					area_id: '',
					// 身份证号
					cert_no: '',
					// 持卡人手机号
					mobile: '',
					// 持卡人证件有效期类型对私必填；1：长期有效；0：非长期有效
					cert_validity_type: 0,
					// 身份证开始日期
					cert_begin_date: '',
					// 身份证结束日期
					cert_end_date: '',
					// 银行号
					bank_code: '',
					// 短信验证码，通过短信验证码【scene=109】获取
					code: '',
				},

				show_cert_begin_date: false,

				end_date_max: 0,
				end_date_min: 0,
				show_cert_end_date: false,

				show_bank_choose: false,
				list: [],
				bank_name: '',

				city_show: false,
				city_text: '',

				tip: '',

				is_agree: false,

				show_cert_validity_type: false,
				type_list: [
					[{
						type: 0,
						text: '非长期有效',
					}, {
						type: 1,
						text: '长期有效',
					}]
				],
			}
		},
		methods: {
			onBeginDate(e) {
				this.end_date_min = e.value;
				var year = new Date(e.value).getFullYear();
				var month = new Date(e.value).getMonth() + 1;
				var day = new Date(e.value).getDate();

				month = month < 10 ? `0${month}` : month;
				day = day < 10 ? `0${day}` : day;

				this.info.cert_begin_date = `${year}${month}${day}`
				this.show_cert_begin_date = false;
			},

			onEndDate(e) {
				var year = new Date(e.value).getFullYear();
				var month = new Date(e.value).getMonth() + 1;
				var day = new Date(e.value).getDate();

				month = month < 10 ? `0${month}` : month;
				day = day < 10 ? `0${day}` : day;

				this.info.cert_end_date = `${year}${month}${day}`
				this.show_cert_end_date = false;
			},

			getConfig() {
				this.$get('hui_fu/getConfig').then(res => {
					this.list.push(res.data.bank);
				})
			},

			onChooseBank(e) {
				this.bank_name = e.value[0].name;
				this.info.bank_code = e.value[0].code;
				this.show_bank_choose = false;
			},

			onCity(e) {
				this.info.area_id = e.code;
				this.info.prov_id = e.code.substring(0, e.code.length - 4) + '0000';
				this.city_show = false;
			},

			codeChange(text) {
				this.tip = text;
			},

			getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (!this.info.mobile) {
						this.$util.msg('请先输入手机号');
					}

					this.$post('/index/sendSms', {
						mobile: this.info.mobile,
						scene: 109,
					}).then(res => {
						this.$refs.uCode.start();
					});
				} else {
					this.$util.msg('倒计时结束后再发送');
				}
			},

			onCertValidityType(e) {
				this.info.cert_validity_type = e.value[0].type;
				this.show_cert_validity_type = false;
			},

			onSubmit() {
				if (!this.is_agree) {
					return this.$util.msg('请先阅读并同意《用户协议》和《隐私政策》');
				}

				if (!this.info.card_name) {
					return this.$util.msg('请填写真实姓名');
				}

				if (!this.info.card_no) {
					return this.$util.msg('请填写银行卡号');
				}

				if (!this.info.area_id) {
					return this.$util.msg('请选择地区');
				}

				if (!this.info.cert_no) {
					return this.$util.msg('请填写身份证号');
				}

				if (!this.info.mobile) {
					return this.$util.msg('请填写持卡人手机号');
				}

				if (!this.info.cert_begin_date && this.info.cert_validity_type == 0) {
					return this.$util.msg('请填写身份证开始日期');
				}

				if (!this.info.cert_end_date && this.info.cert_validity_type == 0) {
					return this.$util.msg('请填写身份证结束日期');
				}

				if (!this.info.bank_code) {
					return this.$util.msg('请选择银行');
				}

				if (!this.info.code) {
					return this.$util.msg('请填写验证码');
				}

				this.$post('/hui_fu/basicdataIndv', this.info).then(res => {
					this.$util.msg(res.msg);
					this.$native.setBankCardSuccess(this.info);
				})
			},

			getData() {
				this.$get('/hui_fu/getUserBasicdata',{},false).then(res => {
					this.info.card_name = res.data.card_name;
					this.info.card_no = res.data.card_no;
					this.info.prov_id = res.data.prov_id;
					this.info.area_id = res.data.area_id;
					this.info.cert_no = res.data.cert_no;
					this.info.mobile = res.data.mobile;
					this.info.cert_validity_type = res.data.cert_validity_type;
					this.info.cert_begin_date = res.data.cert_begin_date;
					this.info.cert_end_date = res.data.cert_end_date;
					this.info.bank_code = res.data.bank_code;
				});
			},

			back() {
				if (this.from_web == 1) {
					this.$util.back();
				} else {
					this.$native.backAction();
				}
			},

		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.from_web = option.from_web || 0;
			var now = Number(new Date());
			this.end_date_min = now;
			this.end_date_max = 3153600000000 + now;
			this.getConfig();
			this.getData();
		},

		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			this.refCode = this.$refs.uCode;
		},
	}
</script>

<style lang="less" scoped>
	.page {
		background: #F1F1F1;
		min-height: 100vh;
		padding: 32rpx;
	}

	.content {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 34rpx 24rpx 24rpx;
		overflow: hidden;
		margin-bottom: 20rpx;

		.title {
			font-weight: 600;
			font-size: 28rpx;
			color: #131313;
			line-height: 36rpx;
		}

		.box {
			height: 96rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			overflow: hidden;
			padding: 0 24rpx;
			margin-top: 20rpx;

			.label {
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				margin-right: 24rpx;
			}

			.input {
				flex: 1;
				overflow: hidden;

				input {
					flex: 1;
					text-align: right;
					color: #131313;
					font-size: 28rpx;
				}

				.code_input {
					text-align: left;
				}

				.text {
					text-align: right;
					flex: 1;
					font-size: 28rpx;
					color: #131313;
					line-height: 36rpx;
				}

				.code_btn {
					width: 152rpx;
					height: 56rpx;
					background: #FD2A53;
					border-radius: 52rpx;

					text {
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}

	}

	.rich_agree {
		margin: 60rpx auto 28rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}

		text {
			font-size: 24rpx;
			color: #131313;

			text {
				font-size: 24rpx;
				color: #FD2A53;
			}
		}
	}

	.btn {
		margin: 0 auto 0;
		width: 604rpx;
		height: 100rpx;
		background: #FD2A53;
		border-radius: 50rpx;
		border: 2rpx solid #FD2A53;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>